#趋势图
<template>
  <div id="census">
    <div class="box">
      <div v-for="(item, index) in hrList" :key="index" class="container">
        <span>{{ item.name }}</span>
        <div :id="&quot;heartRate&quot; + index" class="heartRate"></div>
      </div>
    </div>
    <div class="btnGroup">
      <div>
        <el-select v-model="censusValue" placeholder="请选择">
          <el-option
            v-for="item in censusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-button size="small">删除</el-button>
      </div>
      <div class="b-right">
        <el-button size="small">另存为</el-button>
        <el-button v-if="showStandardEcg" size="small" @click="hideStandardEcg">全屏显示</el-button>
        <el-button v-else size="small" @click="toShowStandardEcg">取消全屏</el-button>
      </div>
    </div>
    <div v-if="showStandardEcg" class="top">
      <ecg-chart 
        ref = "ecgChart"
        :width-value="ecgWidthValue" 
        :height-value="ecgHeightValue"
      ></ecg-chart>
    </div>
    <div v-if="showStandardEcg" class="btnGroup">
      <div class="b-left">
        <div>
          <img src="./../../../assets/resource/ecg/step-backward.png" alt title="最前" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-left.png" alt title="前一页" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-left.png" alt title="前一秒" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-right.png" alt title="后一秒" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-right.png" alt title="后一页" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/step-forward.png" alt title="最后" class="littleBtn" />
        </div>
        <el-button size="small">转到</el-button>
        <el-button size="small">基线上移</el-button>
        <el-button size="small">基线下移</el-button>
      </div>
      <div class="b-right">
        <el-button size="small" @click="hideStandardEcg">隐藏</el-button>
      </div>
    </div>
    <div v-if="!showStandardEcg">
      <el-button size="small" class="fullBtn" @click="toShowStandardEcg">点击此处显示标准心电图</el-button>
    </div>
  </div>
</template>

<script>
var Highcharts = require('highcharts')
import EcgChart from '@/components/ecgChart'

export default {
  components: {
    EcgChart
  },
  data() {
    return {
      ecgWidthValue: undefined,
      ecgHeightValue: undefined,
      data: [],
      hrList: [
        {
          name: '心率'
        }, {
          name: '室早'
        }, {
          name: '室上早'
        }
      ],
      censusOptions: [
        {
          label: '单元格',
          value: 0
        },
        {
          label: '整行',
          value: 1
        },
        {
          label: '整列',
          value: 2
        }
      ],
      censusValue: '单元格',
      defaultHeight: 500,
      showStandardEcg: true
    }
  },
  created() {
    this.data = require('./../../../../public/js/test.json')
    this.$nextTick(() => {
      this.ecgWidthValue = window.innerWidth - 10
      for (let i = 0; i < 3; i++) {
        this.createHRChart(i)
      }
    })
  },
  methods: {
    toShowStandardEcg() {
      this.showStandardEcg = true
      this.defaultHeight = 500
      
      this.$nextTick(() => {
        this.$refs.ecgChart.chartBox()
      })
    },
    hideStandardEcg() {
      this.showStandardEcg = false
      this.defaultHeight = window.innerHeight - 120
    },
    createHRChart(index) {
      const data = this.data
      Highcharts.chart(`heartRate${index}`, {
        chart: {
          height: 175,
          reflow: false,
          borderWidth: 0,
          backgroundColor: '#FFF',
          zoomType: 'x'
        },
        title: {
          text: null
        },
        xAxis: {
          type: 'datetime',
          showLastTickLabel: true,
          maxZoom: 14 * 24 * 3600000, // fourteen days
          plotBands: [{
            id: 'mask-before',
            from: data[0][0],
            to: data[data.length - 1][0],
            color: '#FFF'
          }],
          title: {
            text: null
          }
        },
        yAxis: {
          gridLineWidth: 0,
          labels: {
            enabled: false
          },
          title: {
            text: null
          },
          min: 0.6,
          showFirstLabel: false
        },
        tooltip: {
          formatter: function() {
            return false
          }
        },
        legend: {
          enabled: false
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          series: {
            lineWidth: 1,
            marker: {
              enabled: false
            },
            shadow: false,
            states: {
              hover: {
                lineWidth: 1
              }
            },
            enableMouseTracking: false
          }
        },

        series: [{
          type: 'area',
          name: 'USD to EUR',
          pointInterval: 24 * 3600 * 1000,
          pointStart: data[0][0],
          data: data
        }],

        exporting: {
          enabled: false
        }

      }, function(masterChart) {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#census {
  width: 100%;
  .box {
    width: 100%;
    height: 55vh;
    .container {
      display: flex;
      align-items: center;
      span {
        width: 18px;
        padding: 0 10px;
      }
      .heartRate {
        width: 100%;
      }
    }
  }
  .btnGroup {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #979797;
    .b-left {
      display: flex;
      align-items: end;
    }
    .el-select {
      width: 120px;
      margin-right: 20px;
    }
    .name {
      margin-right: 10px;
    }
  }
  .top {
    .container {
      border: 1px solid #979797;
    }
  }
  .fullBtn {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
  }
  .littleBtn {
    width: 30px;
    height: 30px;
    border: 1px solid #979797;
    margin-right: 10px;
  }
  .el-dialog {
    .leadList {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 53px;
        margin-top: 10px;
      }
    }
    .list {
      margin-top: 10px;
      .name {
        font-size: 14px;
        color: #4a4a4a;
        text-align: left;
        width: 100px;
        display: inline-block;
      }
      .el-select {
        width: 115px;
      }
    }
  }
}
</style>



